import React, { Component } from 'react';
import Swiper from 'swiper'
import "swiper/css/swiper.min.css";
import './Swiper.css'

class HSwiper extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            banners:[]
        }
    }
    
    componentDidMount() {
        this.$axios({
            url:'http://127.0.0.1:9115/banner'
        }).then(res=>{
            // console.log(res.banners);
            this.setState(state=>{
                return{
                    banners:res.banners
                }
            })



             // 完成轮播图的初始化
            this.initSwiper()
        }).catch({

        })
    }

    initSwiper() {
        new Swiper('.swiper-container', {
            autoplay: true,
            loop: true, //设置循环播放
            pagination: {
                el: '.swiper-pagination'
            }
        })
    }

    render() {
        return (
            <div className="swiper">
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    
                    {
                        this.state.banners.map((item,index)=><div className="swiper-slide" key={index}>
                            {item.imageUrl?<img src={item.imageUrl}/> :null }  
                        </div>
                        )
                        
                        
                    }
                </div>
                <div className="swiper-pagination"></div>
            </div>

        </div>
        );
    }
}

export default HSwiper;